<template>
    <view class="comp.checkbox">
        <view class="hd fboxRow Ycenter font32"><template v-if="innerData.isRequired">*</template> {{index+1}}.{{innerData.subject}}</view>
        <view class="bd font28">
            <van-checkbox-group v-model="checkList" @change="change">
                <van-checkbox shape="square" checked-color="#121575" v-for="(item,index) in innerData.options" :key="index" :name="item.text">{{item.text}}</van-checkbox>
            </van-checkbox-group>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            innerData:{
                type: Object,
                default:()=>{
                    return {}
                }
            },
            index:{
                type: Number,
                value: 0
            },
            answers: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                checkList: []
            };
        },
        computed:{
            _answers:{
                get(){
                    return this.answers
                },
                set(val){
                    this.$emit('update:answers',val)
                }
            }
        },
        methods: {
            change() {
                console.log(this._answers)
                if(this._answers.length){
                    let state = true
                    this._answers.filter(item=>{
                        if(item.subjectId == this.innerData.id){
                            item.text = this.checkList.toString()
                            state = false
                        }
                    })
                    if(state){
                        this._answers.push({
                            subjectId: this.innerData.id,
                            text: this.checkList.toString()
                        })
                    }
                }else{
                    this._answers.push({
                        subjectId: this.innerData.id,
                        text: this.checkList.toString()
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .bd{margin-top: 30rpx;color:#121575}
    .van-checkbox{margin-top: 10rpx}
    .bd /deep/.van-checkbox__label{color:#121575}
    .bd /deep/.van-checkbox__icon{transform: scale(.8)}
</style>

